<template>
  <div id="app" :class="isHeader ? 'padding-for-header' : ''">
    <Header v-if="isHeader"/>
<!--    <HeaderReminder v-if="isHeader && isHeaderReminder"/>-->
    <router-view/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Header from '@/components/header';
import HeaderReminder from '@/components/announcement/HeaderReminder';
import { env } from './api/base';

export default {
  name: 'App',
  components: { Header, HeaderReminder },
  computed: {
    ...mapState(['currentUser']),
    // 是否显示页头组件
    isHeader() { return !this.$route.meta.hideHeader; },
    // 是否显示公告
    isHeaderReminder() {
      const reminder = !this.$route.meta.hideHeaderReminder;
      const sidebar = this.$route.matched.map(r => r.meta.sidebar).includes(true);
      return reminder && !sidebar;
    },
  },
  methods: {
    ...mapActions(['setSidebarCollapsed', 'setInvisibleSidebar']),
    // 路由跳转，当 path 一样时不跳转，
    // 例如 url 中保存登录方式`type = code`时，点击`登录/注册`的`登录`标签，不会跳转到无type的默认密码登录状态
    routerPush({ path = this.$route.path, query, force = false }) {
      const isSamePath = this.$route.path === path;
      if (!isSamePath || force) this.$router.push({ path, query }).catch(() => {});
    },
    // 在原有query上添加新query，例如`{ id: 12, title: 'new_query' }`
    addQuery(obj) {
      const oldQuery = this.$route.query;
      const newQuery = Object.assign(JSON.parse(JSON.stringify(oldQuery)), obj); // 深拷贝一次，不然会改变

      if (JSON.stringify(oldQuery) === JSON.stringify(newQuery)) return; // 当`query`没有变化时不跳转
      this.routerPush({ query: newQuery, force: true });
    },
    // 监听屏幕大小，自动折叠侧边栏
    bindScreenWidth() {
      const that = this;
      that.setSidebarCollapsed(window.innerWidth < 1200); // 绑定前设定初始值
      that.setInvisibleSidebar(window.innerWidth < 768); // 绑定前设定初始值
      window.onresize = () => (() => { // 注意括号
        that.setSidebarCollapsed(window.innerWidth < 1200); // 小于 1200px 时自动折叠侧边栏
        that.setInvisibleSidebar(window.innerWidth < 768); // 小于 768px 时使用隐藏式的侧边栏（在页面上方添加展开按钮）
      })();
    },
    // 获取积分情况
    checkScore(scoreType) {
      if (!scoreType) return;
      this.$api.other.score({ type: scoreType });
    },
  },
  created() {
    this.$root.$on('routerPush', this.routerPush);
    this.$root.$on('addQuery', this.addQuery);
    this.$root.$on('checkScore', this.checkScore);
    this.bindScreenWidth();
  },
  mounted() {
    const baseCss = 'padding: 1px; color: #fff; font-size: 12px;';
    const leftCss = `${baseCss} border-radius: 3px 0 0 3px;`;
    const rightCss = `${baseCss} border-radius: 0 3px 3px 0;`;
    console.log(`%c Environment %c ${env.val} `, `${leftCss} background: #606060;`, `${rightCss} background: #42c02e;`);
    console.log(`%c Date Version %c ${env.version} `, `${leftCss} background: #606060;`, `${rightCss} background: #1475b2;`);
  },
};
</script>

<style lang="scss">
@import './assets/scss/index.scss';
@import './assets/scss/values.scss';

.padding-for-header {
  padding-top: $header-height + $header-shadow-blur;
  @media screen and (max-width: $sm) { padding-top: $min-header-height + $header-shadow-blur; };
}
</style>
